<cc:page type="normal" style="customize" showSidebar="false" showHeader="false" />
<cc>
    CCService css = new CCService(userInfo);
    String acc_rc="202385551266A597FF1B";
    String appUserId=request.getParameter("id")==null?"":request.getParameter("id")+"";
    if(appUserId.equals("")||appUserId==null){
    List<CCObject> account = css.cqueryWithRoleRight("Account", "recordtype='" + acc_rc + "'");
    if(account.size()>0){
    appUserId=account.get(0).get("id")==null?"":account.get(0).get("id")+"";
    }
    }</cc>
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <meta name="viewport"
          content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>
    </title>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.39/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.39/vant.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body,
    #app,
    #container {
        width: 100vw;
        height: calc(100vh);
    }

    .van-overlay,
    .van-dialog {
        z-index: 2222 !important;
    }

    .amap-logo {
        display: none !important;
    }

    .van-dialog__content {
        margin: 40px 20px
    }
    #gxdzselect {
        position: absolute;
        background: #ffffff;
        z-index: 2022;
    }
    .auto-item {
        padding: 6px 16px;
        font-size: 14px;
    }

    .amap-geo {
        display: none;
    }

    .map-input {
        height: 50px;
        width: 100vw;
        background: #F4F6F9;
        position: fixed;
        top: 44px;
        display: flex;
        align-items: center;
        padding: 0 16px;
    }

    .amap-sug-result {
        z-index: 2147483648;
    }

    .top-style {
        width: 100%;
        height: 44px;
        background: #202329;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .9375rem;
        position: fixed;
        top: 0;
        z-index: 2147483647;

    }
    .van-dialog__footer {
        border-radius: 12px;
    }
    .van-dialog {
        overflow: inherit;
    }

    .top-style span {
        color: #ffffff;
        font-size: .875rem;
    }

    .top-style span:nth-child(2) {
        font-size: 1rem
    }

    .win-style {
        height: 46px;
        background: #FFFFFF;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.20);
        border-radius: 4px;
        position: fixed;
        top: 110px;
        width: 66vw;
        margin: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .van-icon-cross:before {
        content: '\e6a7';
    }

    .van-icon {
        position: relative;
        display: inline-block;
        font: normal normal normal 14px/1 vant-icon;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .markerIcon {
        display: flex;
        align-items: center;
    }

    .markerIcon img {
        width: 20px;
        height: 20px;
    }

    .markerIcon p {
        margin: 0 20px 0 8px;
    }

    .live-style {
        position: fixed;
        bottom: 82px;
        width: 100vw;
        background: #ffffff;
        z-index: 2009;
    }

    .name-style {
        display: flex;
        padding: 10px 16px 0 10px;
        font-size: 14px;
        color: #54698D;
    }

    .name-style>p:first-child {
        width: 110px;
    }

    .name-style div:first-child {}

    .company-name {
        color: #17315C;
        flex: 1
    }

    .find-style {
        color: #54698D;
        margin-left: 30px;
        width: 50px;
    }

    .add-style {
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #E5851A;
        font-size: 15px;
        margin-top: 16px
    }

    .add-style img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .add-style>div {
        display: flex;
        padding: 0 16px;
    }

    .build-style {
        display: flex;
        height: 46px;
        align-items: center;
        padding: 0 15px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 214748364;
        background: #ffffff;
    }

    .build-style .el-input {
        width: 86%;
    }

    .build-style .el-input .el-input__inner {
        height: 26px;
        border-radius: 0;
        background: #F6F6F6;
        border: none;
        line-height: 26px;
    }

    .build-style .el-input__icon {
        line-height: 26px;
    }

    .build-list {
        padding: 15px 15px;
        border-bottom: 1px solid #D8DDE6;
        font-size: 14px;
        color: #16325C;
    }

    .build-list p {
        padding: 6px 0;
    }

    .address-style {
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        background: #fff;
        z-index: 2147483647;
    }

    .amap-info-tabs {
        display: none !important;
    }

    .el-message--error,
    .el-message--success,
    .el-message--warning {
        top: 80px !important;
        z-index: 2223 !important;
    }

    .amap-info-contentContainer.bottom-left,
    .amap-info-contentContainer.bottom-center,
    .amap-info-contentContainer.bottom-right {
        /* position: fixed;
        bottom: 70px;
        left: 0;
        z-index: 9999; */
        padding-bottom: 0;
    }

    .amap-adcontent-body {
        border: none;
        box-shadow: none;
    }

    .bottom-center .amap-info-sharp {
        display: none !important;
    }

    .amap-info-combo {
        padding-bottom: 10px;
    }
</style>

<body>

<div id="app">
    <div class='top-style'>
        <span @click="window.location.href = 'https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/weiquery.action?m=query&id=' + appUserId"><svg t="1644224890159" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2039" width="20" height="32"><path d="M710.153924 8.980397L266.007127 460.692524a81.118646 81.118646 0 0 0 0.861532 114.476097l446.192936 441.050666a26.922883 26.922883 0 0 0 37.853573-38.284339L304.722232 536.884282a27.27288 27.27288 0 0 1-0.323074-38.445877L748.545955 46.726278A26.922883 26.922883 0 1 0 710.180847 9.00732z" p-id="2040" fill="#ffffff"></path></svg></span>
        <span>地图</span>
        <span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{mapZoom}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for='(item,index) in zoomList' :key='index' @click.native='changeZoom'>{{item}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <div id="panel"></div>
    <div id="container"></div>
    <div class="map-input">
        <el-input ref="jbxxkhmc" id="searchInput" v-model="mapSearchCont" data-name="客户名称" placeholder="搜索位置、公交站、地铁站"
                  suffix-icon="el-icon-search">
        </el-input>
    </div>
    <div class="win-style">
        <div class="markerIcon" @click="SjMarker">
            <img
                    src="https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205175682YhgtzCtw"
                    alt="">
            <p>商机</p>
            <img v-if="ifSjIcon"
                 src="https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205119514WzrOEV5o">
            <img v-else
                 src="https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205247060zATnUf9x"
                 alt="" />
        </div>
        <div class="markerIcon" @click="KhMarker">
            <img
                    src="https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205215220x0c9llZ8"
                    alt="" />
            <p>客户</p>

            <img v-if="ifKhIcon"
                 src="https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205119514WzrOEV5o">
            <img v-else
                 src="https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205247060zATnUf9x"
                 alt="" />
        </div>
    </div>
    <van-button type="primary" style="position: fixed;top:110px;right:10px " @click="infoWindow.clear()">取消导航
    </van-button>
    <van-dialog v-model="showAddress" title="更改地址" show-cancel-button style="z-index: 2222;"
                @cancel='showAddress = false' :before-close='sureAddress'>

        <el-input id="gxdzinput" clearable placeholder="请输入内容" v-model="searchCode">
        </el-input>
        <div id='gxdzselect'></div>
    </van-dialog>
    <!-- <div class="live-style" v-if='showCard'>
      <p style="text-align: right;">
        <van-icon name="cross" @click='showCard = false' />
      </p>
      <div v-if='showBusniess'>
        <div class="name-style">
          <p style='width: 80px;'>商机名称:</p>
          <div class="company-name">
            <p @click='goDetail(baseInfo.id)' style="display: flex;align-items: center;">{{baseInfo.name}}
              <span class="find-style">查看</span>
              <img src="/staticResource.action?m=getResource&resourceId=16462050298537kejFCy3">
            </p>
          </div>
        </div>
        <div class="name-style">
          <p style='width: 80px;'>投标频次:</p>
          <div class="company-name">
            <p>{{baseInfo.status}}</p>
          </div>
          <p></p>
        </div>
        <div class="name-style">
          <p style='width: 80px;'>商机阶段:</p>
          <div class="company-name">
            <p>{{baseInfo.type}}</p>
          </div>
          <p></p>
        </div>

      </div> -->
    <!-- <div v-if='!showBusniess'>
        <div class="name-style">
          <p>客户名称:</p>
          <div class="company-name">
            <p @click='goDetail(baseInfo.id)' style="display: flex;align-items: center;">{{baseInfo.name}}
              <span class="find-style">查看</span>
              <img src="/staticResource.action?m=getResource&resourceId=16462050298537kejFCy3">
            </p>
          </div>
        </div>
        <div class="name-style">
          <p>客户跟进状态:</p>
          <div class="company-name">
            <p>{{baseInfo.status}}</p>
          </div>
          <p></p>
        </div>
        <div class="name-style">
          <p>客户开函状态:</p>
          <div class="company-name">
            <p>{{baseInfo.type}}</p>
          </div>
          <p></p>
        </div>
        <div class="name-style">
          <p>投标频次:</p>
          <div class="company-name">
            <p>{{baseInfo.tbpc}}</p>
          </div>
          <p></p>
        </div>
      </div> -->
    <!-- <div>
          <img src="/staticResource.action?m=getResource&resourceId=1646205119514WzrOEV5o">
          <span>添加活动</span>
        </div> -->
    <!-- <div @click='changeAddress'>
          <img src="/staticResource.action?m=getResource&resourceId=1646205084097J7t02Otc">
          <span>更新地址</span>
        </div>
        <div>
          <img src="/staticResource.action?m=getResource&resourceId=1646205057255IHyaZFVn">
          <span @click='goMap'>导航</span>
        </div> -->
</div>

<!-- 更新地址 -->
</body>

<script>
    var appUserId = "<cc:outprint>appUserId</cc:outprint>"
    new Vue({
        el: '#app',
        data: {
            mapDriving: '', //路线导航实例
            selfPosition: [], //当前位置的经纬度
            endPosition: [], //终点位置
            grounpId: '',
            showBusniess: true,
            baseInfo: {},
            marketsList: [], //客户标记
            marketsListsj: [], //商机标记
            searchCode: '', //更改地址搜索关键字
            AMap: '',
            sjIndex: 0,
            showAddress: false, //更改地址
            showCard: false, //是否显示卡片
            cxjskList: [],
            mapSearchCont: '',
            mapZoom: '3Km', //地图比例
            mapZoomValue: 16,
            zoomList: ['3km', '5km', '10km', '全市'], //地图比列列表
            url: ['https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/customize/page/eed30c4aea/findMapInfoApp.jsp'],
            mapCon: '',
            // 商机图标显示
            ifSjIcon: false,
            sjIconMarkerList: [],
            sjmarker: '',
            // 客户图标显示
            ifKhIcon: false,
            khIconMarkerList: [],
            khmarker: '',
            sjmarker: '',
            khList: [],
            sjList: [],
            khAdress: '',
            tzbsjList: [],
            infoWindow: ''
        },
        mounted() {
            window._AMapSecurityConfig = {
                securityJsCode: '39cbd69cf7a473bf0b5f5cd65dab3b19',
            }

            this.$nextTick(() => {
                this.init_map()
            })
            // window.addEventListener('resize',function(){
            //  alert(window.outerHeight)
            // });

        },
        watch: {
            //更新地址进行联动地址
            showAddress() {
                const _this = this
                setTimeout(() => {
                    _this.mapSearch2 = new _this.AMap.Autocomplete({
                        input: 'gxdzinput',
                        output: 'gxdzselect',
                        type: 'poi',
                    })

                    _this.AMap.event.addListener(_this.mapSearch2, 'select', function (data) {
                        if (data.poi.location != undefined) {
                            _this.$set(_this, 'searchCode', data.poi.district + data.poi.address)
                            console.log(_this.searchCode)
                        }
                    },500)
                })
            }
        },
        methods: {
            /**
             * 网络请求
             */
            userAxios(path, params, funcTion = () => {}) {
                this.getRequest(path, params).then(
                    (res) => {

                        funcTion(res)
                        return res
                    },
                    (err) => {
                        return err
                    }
                )
                    .catch((error) => {
                        return error
                    })
            },
            //获取cookie的值
            getCookie(key) {
                let value = decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(
                    key).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
                if (value && value.substring(0, 1) === '{' && value.substring(value.length - 1, value.length) === '}') {
                    try {
                        value = JSON.parse(value);
                    } catch (e) {
                        return value;
                    }
                }
                return value;
            },
            // http请求封装
            getRequest(url, params) {
                const service = axios.create({
                    timeout: 60000, // request timeout
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                    },
                })
                // request interceptor
                service.interceptors.request.use(
                    config => {
                        config.headers.accessToken = this.getCookie('binding')
                        return config
                    },
                    error => {
                        // Do something with request error
                        Promise.reject(error)
                    }
                )

                // response interceptor
                service.interceptors.response.use(
                    response => {
                        const code = response.status || 200
                        if (code !== 200) {
                            return Promise.reject(null == response.statusText ? "未知异常" : response.statusText)
                        } else {
                            return response.data
                        }
                    },
                    error => {
                        return Promise.reject(error)
                    }
                )
                // getLight(url, data = {}, responseType = '') {

                // },
                return service({
                    url: url,
                    method: 'post',
                    params: {
                        ...params
                    }
                })
            },
            // 获取当前位置附近的商机
            getBusAndCusLsit(val1, val2) {
                let value = val2 + ',' + val1
                let {
                    url,
                    userAxios
                } = this
                let params = {
                    type: 'findMap',
                    data: value
                }
                const _this = this
                userAxios(url[0], params, (res) => {
                    if (res.code === '200') {
                        _this.removeMarker(_this.khmarker)
                        _this.removeMarker(_this.sjmarker)
                        _this.sjIconMarkerList = res.Eleopp
                        _this.khIconMarkerList = res.Account
                        _this.setKhMarker()
                        _this.setSjMarker()
                        if (_this.ifSjIcon) {
                            _this.addMarker(_this.sjmarker)
                        }
                        if (_this.ifKhIcon) {
                            _this.addMarker(_this.khmarker)
                        }
                    } else {
                        _this.removeMarker(_this.khmarker)
                        _this.removeMarker(_this.sjmarker)
                        _this.sjIconMarkerList = []
                        _this.khIconMarkerList = []
                    }
                })
            },

            //查看详情
            goDetail(id) {
                console.log(id)
                window.location.href = 'https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/#/weiquery.action?id=' + id +
                    '&m=query'
            },
            // 添加商机
            SjMarker() {
                let {
                    ifSjIcon
                } = this
                if (ifSjIcon) {
                    this.ifSjIcon = false
                    this.removeMarker(this.sjmarker)
                } else {
                    this.ifSjIcon = true
                    this.addMarker(this.sjmarker)
                }
            },
            // 添加客户
            KhMarker() {
                let {
                    ifKhIcon
                } = this
                if (ifKhIcon) {
                    this.ifKhIcon = false
                    this.removeMarker(this.khmarker)
                } else {
                    this.ifKhIcon = true
                    this.addMarker(this.khmarker)
                }
            },
            //改变地图尺寸
            changeZoom(e) {
                if (e.target.innerText) {
                    switch (e.target.innerText) {
                        case '3km':
                            this.mapZoom = e.target.innerText
                            this.mapZoomValue = 16
                            break;
                        case '5km':
                            this.mapZoom = e.target.innerText
                            this.mapZoomValue = 12
                            break;
                        case '10km':
                            this.mapZoom = e.target.innerText
                            this.mapZoomValue = 11
                            break;
                        default:
                            this.mapZoom = e.target.innerText
                            this.mapZoomValue = 9
                    }
                    this.mapCon.setZoom(this.mapZoomValue)
                }
            },
            //取消导航
            cancelMap() {
                if (this.mapDriving) {
                    this.mapDriving.clear();
                }
            },
            //导航跳转到高德
            goMap() {
                const _this = this
                console.log(this.endPosition, 44)
                this.AMap.plugin('AMap.Driving', function () {
                    var driving = new AMap.Driving({
                        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                        policy: AMap.DrivingPolicy.LEAST_TIME,
                        map: _this.mapCon
                    })
                    _this.mapDriving = driving
                    console.log(_this.mapDriving)
                    let startLngLat = _this.selfPosition
                    let endLngLat = _this.endPosition
                    // let startLngLat = [116.379028, 39.865042]
                    // let endLngLat = [116.427281, 39.903719]
                    driving.search([startLngLat[0], startLngLat[1]], [endLngLat[0], endLngLat[1]], function (status,
                                                                                                             result) {
                        if (status === 'complete') {
                            _this.showCard = false
                        } else {
                            _this.$message.error('获取驾车路线失败,请重试')
                        }
                        // 未出错时，result即是对应的路线规划方案
                    })
                })
            },
            closeBuild() {
                this.showAddress = false
            },
            SearchCompany() {

            },
            // AMapInit() {
            //   map = new AMap.Map('container', {
            //     resizeEnable: true,
            //     zoom: 10
            //   })

            // },
            //删除商机客户标记
            removeMarker(list, type) {
                this.mapCon.remove(list);
            },
            //添加商机客户点标记
            addMarker(list) {
                this.mapCon.add(list)
            },
            // 初始化商机marker
            setSjMarker() {
                const _this = this
                // 商机marker
                let sjmarkerarr = []
                _this.sjIconMarkerList.forEach((element) => {
                    let {
                        infoWindow,
                        amap,
                        AMap,
                        mapCon
                    } = _this
                    let jwd = element.jwd.split(',')
                    let index = new AMap.Marker({
                        icon: new AMap.Icon({
                            image: 'https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205175682YhgtzCtw',
                            imageSize: new AMap.Size(36, 36),
                            size: new AMap.Size(36, 36),
                        }),
                        position: jwd,
                        anchor: 'top-left',
                        offset: new AMap.Pixel(-18, -36),
                    })
                    index.on('click', (e) => {
                        _this.searchCode = element.lxdz
                        _this.showCard = true
                        _this.grounpId = element.GroupId
                        _this.endPosition = [Number(element.jwd.split(',')[0]), Number(element.jwd.split(',')[1])]
                        _this.showBusniess = true
                        // _this.baseInfo.name = element.name
                        // _this.baseInfo.status = element.tbpc
                        // _this.baseInfo.type = element.jd
                        // _this.baseInfo.id = element.eleoppId
                        let x = e.lnglat.getLng(),
                            y = e.lnglat.getLat(),
                            name = element.name,
                            id = element.eleoppId,
                            sjjd = element.jd,
                            tbpc = element.tbpc
                        infoWindow.setContent(
                            '<p style="text-align: right;"><van-icon name="cross" onclick="closed(\'' +
                            id +
                            '\')"></p><div class="name-style"><p style="width: 80px;">客户名称:</p><div class="company-name"><p onclick="goDetail(\'' +
                            id +
                            '\')" style="display: flex;align-items: center;">' + name +
                            '<span class="find-style">查看</span><img src="/staticResource.action?m=getResource&resourceId=16462050298537kejFCy3"></p></div></div>' +
                            '<div class="name-style"><p style="width: 80px;">投标频次:</p><div class="company-name"><p>' +
                            tbpc + '</p></div><p></p></div><div class="name-style"><p style="width: 80px;">商机阶段:</p>' +
                            '<div class="company-name"><p style="width: 80px;">' + sjjd +
                            '</p></div><p></p></div> <div style="display:flex;justify-content: center;padding:10px"><span style="display:flex" onclick="changeAddress(\'' +
                            id +
                            '\')"><img src="/staticResource.action?m=getResource&resourceId=1646205084097J7t02Otc"><span>更新地址</span></span></div>'
                        )
                        infoWindow.open(mapCon, new AMap.LngLat(x, y))
                        console.log(document.getElementsByClassName('keyword'))

                    })
                    sjmarkerarr.push(index)
                })
                _this.sjmarker = sjmarkerarr
            },
            // 初始化客户marker
            setKhMarker() {
                const _this = this
                // 客户marker
                let khmarkerarr = []
                _this.khIconMarkerList.forEach((element) => {
                    let {
                        infoWindow,
                        amap,
                        AMap,
                        mapCon
                    } = _this
                    let jwd = element.jwd.split(',')
                    let index = new AMap.Marker({
                        icon: new AMap.Icon({
                            image: 'https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/staticResource.action?m=getResource&resourceId=1646205215220x0c9llZ8',
                            imageSize: new AMap.Size(36, 36),
                            size: new AMap.Size(36, 36),
                        }),
                        position: jwd,
                        offset: new AMap.Pixel(-18, -36),
                    })
                    console.log(element.jwd.split(','))
                    index.on('click', (e) => {
                        _this.searchCode = element.lxdz
                        _this.showCard = true
                        _this.grounpId = element.GroupId
                        _this.endPosition = [Number(element.jwd.split(',')[0]), Number(element.jwd.split(',')[1])]
                        _this.showBusniess = false
                        // _this.baseInfo.name = element.name
                        // _this.baseInfo.status = element.khgjzt
                        // _this.baseInfo.type = element.khkhzt
                        // _this.baseInfo.tbpc = element.tbpc
                        // _this.baseInfo.id = element.accountId
                        let x = e.lnglat.getLng(),
                            y = e.lnglat.getLat(),
                            name = element.name,
                            id = element.accountId,
                            khgjzt = element.khgjzt,
                            khkhzt = element.khkhzt,
                            tbpc = element.tbpc
                        infoWindow.setContent(
                            '<p style="text-align: right;"><van-icon name="cross" onclick="closed(\'' +
                            id +
                            '\')"></p><div class="name-style"><p>客户名称:</p><div class="company-name"><p onclick="goDetail(\'' +
                            id +
                            '\')" style="display: flex;align-items: center;">' + name +
                            '<span class="find-style">查看</span><img src="/staticResource.action?m=getResource&resourceId=16462050298537kejFCy3"></p></div></div>' +
                            '<div class="name-style"><p>客户跟进状态:</p><div class="company-name"><p>' + khgjzt +
                            '</p></div><p></p></div><div class="name-style"><p>客户开函状态:</p>' +
                            '<div class="company-name"><p>' + khkhzt +
                            '</p></div><p></p></div><div class="name-style"><p>投标频次:</p><div class="company-name"><p>' +
                            tbpc + '</p></div><p></p></div>' +
                            '</span></div>  <div style="display:flex;justify-content: center;padding:10px"><span style="display:flex" onclick="changeAddress(\'' +
                            id +
                            '\')"><img src="/staticResource.action?m=getResource&resourceId=1646205084097J7t02Otc"><span>更新地址</span></span></div>'
                        )
                        infoWindow.open(mapCon, new AMap.LngLat(x, y))

                    })
                    khmarkerarr.push(index)
                })
                _this.khmarker = khmarkerarr
            },
            //更新地址
            sureAddress(action, done) {
                if (action === 'confirm') {
                    if (this.searchCode) {
                        let {
                            url,
                            userAxios
                        } = this
                        let data = {
                            id: this.grounpId,
                            address: this.searchCode,
                            status1: ''
                        }
                        let params = {
                            type: 'updateAddress',
                            data: JSON.stringify(data)
                        }
                        const _this = this
                        userAxios(url[0], params, (res) => {
                            if (res.code === '200') {
                                _this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                window.location.reload()
                            } else {
                                _this.$message.error(res.msg)
                            }
                        })
                        return done()
                    } else {
                        this.$message.error('地址不能为空')
                        return done(false)
                    }
                } else {
                    return done()
                }
            },
            async MapLoader(key) {
                return new Promise((resolve, reject) => {
                    if (window.AMap) {
                        window.onload = function () {
                            resolve(window.AMap)
                        }
                    } else {
                        var script = document.createElement('script');
                        script.type = 'text/javascript';
                        script.axync = true;
                        script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + key; // 申请个人 key
                        script.onerror = reject;
                        document.head.appendChild(script);
                        window.onload = function () {
                            resolve(window.AMap)
                        }
                    }
                })
            },
            init_map() {
                let that = this
                const _this = this
                this.MapLoader('8504754a1c875a2669348f85b863bfd3').then((AMap) => { // MapLoader(key)  ---> 申请的个人  key
                    that.map = new AMap.Map('container', { // html 放置 一个 id = container 的div
                        mapStyle: 'amap://styles/7e8dadf307af8b4a5da5a98e53fd2657', //   *** 地图的背景颜色   （ 可以自己在高德官网 查看如何配置 ）
                        zoom: this.mapZoomValue,
                        // resizeEnable: true,
                    })
                    this.AMap = AMap
                    this.mapCon = that.map

                    // AMap.plugin('AMap.ToolBar', function () {
                    //   var toolbar = new AMap.ToolBar()
                    //   that.map.addControl(new AMap.ToolBar());
                    // })
                    AMap.plugin('AMap.DistrictSearch', function () {
                        _this.districtSearch = new AMap.DistrictSearch({
                            subdistrict: 0, //返回下一级行政区
                            showbiz: false, //最后一级返回街道信息
                        })
                    })
                    AMap.plugin('AMap.AdvancedInfoWindow', function () {
                        // 创建信息窗
                        _this.infoWindow = new AMap.AdvancedInfoWindow({
                            closeWhenClickMap: true,
                            offset: new AMap.Pixel(0, -30),
                            asOrigin: false,
                            placeSearch: false,
                            autoMove: true,
                        })
                    })
                    // 更新地址window事件
                    window.goDetail = function (id) {
                        console.log(id)
                        window.location.href = 'https://k8mm3cmt3235c7ed72cede6e.cloudcc.com/#/weiquery.action?id=' + id +
                            '&m=query'
                    }
                    //更新地址
                    window.changeAddress = function () {
                        _this.showAddress = true
                        AMap.plugin('AMap.Autocomplete', function () {
                            _this.mapSearchs = new AMap.Autocomplete({
                                input: 'searchInputs',
                            })
                            AMap.event.addListener(_this.mapSearchs, 'select', function (data) {
                                if (data.poi.location != undefined) {
                                    _this.searchCode = data.poi.district + data.poi.address
                                }
                            })
                        })
                    }
                    window.closed = function () {
                        _this.infoWindow.close()
                    }
                    AMap.plugin('AMap.Autocomplete', function () {
                        that.mapSearch = new AMap.Autocomplete({
                            input: 'searchInput',
                        })
                        that.mapSearchs = new AMap.Autocomplete({
                            input: 'searchInputs',
                        })
                        AMap.event.addListener(that.mapSearchs, 'select', function (data) {
                            if (data.poi.location != undefined) {
                                _this.searchCode = data.poi.district + data.poi.address
                            }
                        })
                        AMap.event.addListener(that.mapSearch, 'select', function (data) {
                            if (data.poi.location != undefined) {
                                //定位到中心点
                                //TODO 获取数据，对数据进行操作如：添加marker等
                                if (!data.poi.location.lng) {
                                    _this.districtSearch.search(
                                        data.poi.name,
                                        function (status, result) {
                                            if (status == 'complete') {
                                                _this.getBusAndCusLsit(result.districtList[0].center.lat, result.districtList[
                                                    0].center.lng)
                                                that.selfPosition = [result.districtList[0].center.lng, result.districtList[0]
                                                    .center.lat
                                                ]
                                                that.map.setCenter(result.districtList[0].center)
                                                that.map.setZoom(15)
                                                that.infoWindow.close()
                                            }
                                        }
                                    )
                                } else {
                                    _this.getBusAndCusLsit(
                                        data.poi.location.lat, data.poi.location.lng
                                    )
                                    that.selfPosition = [data.poi.location.lng, data.poi.location.lat]
                                    that.map.setCenter(data.poi.location)
                                    that.map.setZoom(15)
                                    that.infoWindow.close()
                                }
                                that.showCard = false
                                that.cancelMap()
                            }
                        })
                    })
                    // that.map.setZoom(this.mapZoomValue)
                    AMap.plugin('AMap.Geolocation', function () { //  返回当前的  个人所在的位置  （定位）
                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true, //是否使用高精度定位，默认:true
                            timeout: 10000, //超过10秒后停止定位，默认：5s
                            buttonPosition: 'RB', //定位按钮的停靠位置
                            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                            //zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
                        })
                        that.map.addControl(geolocation)
                        geolocation.getCurrentPosition()
                        geolocation.getCurrentPosition(function (status, result) {
                            if (status == 'complete') {
                                that.selfPosition = [result.position.lng, result.position.lat]
                                that.getBusAndCusLsit(result.position.lat, result.position.lng)
                                console.log(result)
                            } else {
                                console.log(result)
                            }
                        })
                    })
                    _this.setSjMarker()
                    _this.setKhMarker()
                })
            }
        }
    })
</script>

</html>